@import './variants.css';
@import './palette.css';

/** mapped strictly to ./palette.css */
@theme {
	/* default foreground */
	--color-fg: var(--palette-fg);
	--color-fg-100: var(--palette-fg-100);

	/* default background */
	--color-bg: var(--palette-bg);
	--color-bg-100: var(--palette-bg-100);
	--color-bg-200: var(--palette-bg-200);

	/* elements */
	--color-placeholder: var(--palette-placeholder);
	--color-link: var(--palette-link);

	/* primary */
	--color-primary: var(--palette-primary);
	--color-primary-fg: var(--palette-primary-fg);
	--color-primary-bg: var(--palette-primary-bg);
	--color-primary-shadow: var(--palette-primary-shadow);

	/* secondary */
	--color-secondary: var(--palette-secondary);
	--color-secondary-fg: var(--palette-secondary-fg);

	/* outline */
	--color-outline: var(--palette-outline);
	--color-outline-100: var(--palette-outline-100);
	--color-outline-focus: var(--palette-outline-focus);

	/* status */
	--color-info-fg: var(--palette-info-fg);
	--color-info-bg: var(--palette-info-bg);
	--color-info-bg-100: var(--palette-info-bg-100);
	--color-info-bg-200: var(--palette-info-bg-200);

	--color-success-fg: var(--palette-success-fg);
	--color-success-bg: var(--palette-success-bg);
	--color-success-bg-100: var(--palette-success-bg-100);
	--color-success-bg-200: var(--palette-success-bg-200);

	--color-warning-fg: var(--palette-warning-fg);
	--color-warning-bg: var(--palette-warning-bg);
	--color-warning-bg-100: var(--palette-warning-bg-100);
	--color-warning-bg-200: var(--palette-warning-bg-200);

	--color-error-fg: var(--palette-error-fg);
	--color-error-bg: var(--palette-error-bg);
	--color-error-bg-100: var(--palette-error-bg-100);
	--color-error-bg-200: var(--palette-error-bg-200);

	/* additional colors */
	--color-svelte: #ef4623;
}

:root {
	color-scheme: light;

	@apply palette-light;

	@media dark {
		color-scheme: dark;

		@apply palette-dark;
	}
}
